<template>
  <div class="header">
    <div class="top">
      <div class="back" @click="back()">
        <span class="iconfont icon-zuojiantou"></span>
        <span class="b1">返回</span>
      </div>
      <div class="right">
        <van-search
          v-model="value"
          show-action
          placeholder="请输入搜索关键词"
          @search="onSearch"
        >
          <template #action>
            <div @click="getData">搜索</div>
          </template>
        </van-search>
      </div>
    </div>
    <div class="middle">
      <img src="../assets/sread-img/tubiao.png" alt="" />
    </div>
    <div class="na-bottom"  v-if="value">
      <div class="bottom" v-for="(v, k) in result.data.result" :key="k">
        <router-link class="shangping" :to="{path:'/xiangqing', query:{pid:v.pid}}">
          <div class="n-top">
            <img :src="v.smallImg" alt="" />
          </div>
          <div class="n-bottom">
            <div class="title">{{ v.name }}</div>
            <div class="enname">{{ v.enname }}</div>
            <div class="price">￥{{ v.price }}</div>
          </div>
        </router-link>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  .top {
    display: flex;
    .back {
      width: 13%;
      height: 52px;
      line-height: 52px;
      font-size: 14px;
      .iconfont {
      }
      .b1 {
      }
    }
    .right {
      width: 90%;
    }
  }
  .middle {
    img {
      width: 100%;
    }
  }
  .na-bottom {
    margin-top: 10px;
    margin-bottom: 50px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    .bottom {
      width: 50%;
      display: flex;
      flex-wrap: wrap;
      .shangping {
        margin-left: 10px;
        .n-top {
          img {
            width: 90%;
            border-radius: 10px;
          }
        }
        .n-bottom {
          width: 100%;
          .title {
            color: #808487;
            font-size: 15px;
          }
          .enname {
            width: 100%;
            color: #808487;
            font-size: 13px;
          }
          .price {
            color: #0c34ba;
            font-size: 15px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
<script>
import "../assets/fonts/iconfont.css";
export default {
  name: "search",
  data() {
    return {
      value: "",
      result: "",
    };
  },

  methods: {
    back(){
      this.$router.back();
    },
    onSearch(val) {
      this.value = val;
    },
    getData() {
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        name: this.value,
      };
      this.axios("/search", {
        methods: "GET",
        params: d,
      })
        .then((res) => {
          this.result = res;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  mounted() {
    this.onSearch();
    this.getData();
  },
  created() {},
};
</script>